<template>
  <div id="container">
    <el-row>
      <el-col>
        <el-table
          size="small"
          :data="stockSectorInfoPager"
          border
          :header-cell-style="tableHeaderColor"
          :cell-style="cellContentStyle"
          style="width: 100%">
          <el-table-column
            prop="dm"
            label="行业代码"
            width="110">
          </el-table-column>
          <el-table-column
            prop="mc"
            label="行业名称"
            width="140">
          </el-table-column>
          <el-table-column
            prop="jj"
            label="均价"
            width="60">
          </el-table-column>
          <el-table-column
            prop="zdf"
            label="涨跌幅"
            width="60">
            <template slot-scope="scope" >
              <div v-if="scope.row.zdf < 0" style="color:green">
                {{ scope.row.zdf +'%' }}
              </div>
              <div v-else style="color: red">
                {{ scope.row.zdf +'%' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lrzj"
            label="流入资金"
            width="120">
          </el-table-column>
          <el-table-column
            prop="lczj"
            label="流出资金"
            width="120">
          </el-table-column>
          <el-table-column
            prop="jlr"
            label="净流入"
            width="120">
          </el-table-column>
          <el-table-column
            prop="jlrl"
            label="净流入率"
            width="70">
            <template slot-scope="scope" >
              <div v-if="scope.row.jlrl < 0" style="color:green">
                {{ scope.row.zdf +'%' }}
              </div>
              <div v-else style="color: red">
                {{ scope.row.jlrl +'%' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lzgmc"
            label="领涨股名称"
            width="110">
          </el-table-column>
          <el-table-column
            prop="lzgdm"
            label="领涨股代码"
            width="110">
          </el-table-column>
          <el-table-column
            prop="lzgjlrl"
            label="领涨股净流入率"
            width="110">
          </el-table-column>
          <el-table-column
            prop="t"
            label="更新时间"
            width="140">
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12" :offset="6" style="margin-top: 10px;text-align: center">
            <el-pagination
              :current-page.sync="currentPage"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :pager-count="15"
              layout="prev, pager, next"
              :total="stockSectorInfo.length">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "sector.vue",
  data() {
    return {
      pageSize: 12,   //每页的记录数
      currentPage: 1, //当前的页号，
      stockSectorInfo: []
    }
  },
  computed: {
    stockSectorInfoPager: function () {
      return this.stockSectorInfo.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
  },
  mounted() {
    this.getStockSectorInfo();
  },
  methods: {
    //实现对json对象数组指定属性排序
    sortBy(array, field, sort = "desc"){
      const sortOpt = {
        asc: (a, b, sortField) => a[sortField] - b[sortField],
        desc: (a, b, sortField) => b[sortField] - a[sortField],
      };
      array.sort((a, b) => sortOpt[sort](a, b, field));
      return array;

    },
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'text-align: center;color: #426ab3'
    },
    cellContentStyle({row, column, rowIndex, columnIndex}) {
      return "text-align: center;"
    },
    getStockSectorInfo() {
      this.$store.dispatch('queryStockSectorRealInfo').then(resp => {
        console.log(resp);
        this.stockSectorInfo = JSON.parse(resp.data);
        this.stockSectorInfo = this.sortBy(this.stockSectorInfo,'zdf');
      })
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
      //console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //console.log(this.currentPage)  //点击第几页
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 20px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
